<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>

    <style>
      h2,
      p {
        margin: 0;
      }
      .box {
        margin: 30px auto;
        width: 300px;
      }
      #user,
      #message {
        box-sizing: border-box;
        width: 300px;
        border: 1px solid #000;
        padding: 10px;
        height: 100px;
        resize: none;
        display: block;
      }
      #user {
        padding: 0 10px;
        height: 30px;
        margin-bottom: 10px;
      }
      #btn {
        display: block;
        margin: 10px auto;
        width: 60%;
        height: 40px;
      }
      #list {
        border-top: 1px solid #000;
        padding: 10px 0 0;
        margin: 0;
        list-style: none;
      }
      #list li {
        position: relative;
        font: 14px/30px "宋体";
        border-bottom: 1px solid #000;
        padding: 0 15px;
        overflow: hidden;
      }
      .clos {
        position: absolute;
        right: 5px;
        top: 10px;
      }
      .clos2 {
        position: absolute;
        right: 5px;
        top: 30px;
      }
      /* .replay{
    position:absolute;
    right: 5px;
    top: 35px;
} */
      .mask {
        width: 100vw;
        height: 100vh;
        background: black;
        opacity: 0.3;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
      }
      .comfirm {
        width: 200px;
        height: 120px;
        background: white;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 30%;
        border-radius: 5px;
        transform: translate(-50%, -50%);
        overflow: hidden;
        display: none;
      }
      .comfirm button {
        /* position: absolute; */
        /* right: 10px; */
        float: right;
        margin-top: 20px;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <input type="text" id="user" value="小明" />
      <textarea id="message">我就是传说中的无敌小明</textarea>
      <button id="btn">提交留言</button>
      <ul id="list">
        <li style="height: auto">
          <h2 class="user">小王说:</h2>
          <p>呼叫无敌小明</p>

          <a href="javascript:;" class="clos">删除</a>
          <a href="javascript:;" class="clos2">回复</a>
        </li>
        <li style="height: auto">
          <h2 class="user">老师说:</h2>
          <p>小明滚出去</p>
          <p>回复的内容</p>
          <a href="javascript:;" class="clos">删除</a>
        </li>
      </ul>
    </div>
    <script src="./ajax.js"></script>
    <script>
      // 留言板 功能
      // 一、添加 、删除功能
      // 添加功能 ；
      let btn = document.querySelector("#btn");
      let usernameEle = document.querySelector("#user");
      let messageEle = document.querySelector("#message");
      let listEle = document.querySelector("#list");

      btn.onclick = async function () {
        let name = usernameEle.value;
        let message = messageEle.value;
        console.log(name, message);
        let res = await $.ajax({
          type: "post",
          url: "/addUser",
          data: {
            name,
            message,
          },
        });
        console.log("后端返回的数据", res);
        if (res.status === 1) {
          let { message } = await $.get("/getdata");
          console.log("12555", message);
          renderDom(message);
        }
      };
      (async function () {
        let res = await $.get("/getdata");
        let { message } = res;
        renderDom(message);
      })();

      function renderDom(data) {
        listEle.innerHTML = "";
        // 对象数组 循环
        console.log("data111", data);
        data.forEach((item) => {
          var liEle = document.createElement("li");
          // liEle.style.height = "auto";
          liEle.setAttribute("myid", item._id);
          liEle.innerHTML = `<h2 class="user">${item.name}说:</h2>
                            <p>${item.message}</p>
                            <a href="javascript:;" class="clos">删除</a>
                            <a href="javascript:;" class="clos2">回复</a>
                            <p class="myreplay" style="display:none"><input /> <button class="sure">确定</button><button class="cancel">取消</button></p>
                            `;
          // 需要显示回复的内容；
          item.replay.forEach((val) => {
            let pEle = document.createElement("p");
            pEle.innerHTML = val;
            liEle.appendChild(pEle);
          });

          // 点击删除
          liEle.onclick = async function (e) {
            let target = e.target;
            if (target.classList.contains("clos")) {
              console.log("点击了删除按钮");
              let _id = this.getAttribute("myid");
              console.log(_id);
              // 通过ajax 把 _id传递给nodejs；
              let { status } = await $.get("/delUser", { _id: _id });
              if (status == 1) {
                let { message } = await $.get("/getdata");
                console.log({ message });
                renderDom(message);
              }
            }
            // };

            //点击回复
            // liEle.onclick = async function (e) {
            //   let target = e.target;
            if (target.classList.contains("clos2")) {
              console.log("点击了回复");
              let replayEle = this.querySelector(".myreplay");
              replayEle.style.display = "block";
              let sureEle = replayEle.querySelector(".sure");
              let cancelEle = replayEle.querySelector(".cancel");
              let that = this;
              sureEle.onclick = async function () {
                let _id = that.getAttribute("myid");
                let inputval = replayEle.querySelector("input").value;
                let { status } = await $.get("/replayData", { _id, inputval });
                if (status === 1) {
                  // 获取最新的数据 渲染；
                  let { message } = await $.get("/getdata");
                  renderDom(message);
                }
              };
              cancelEle.onclick = function () {
                replayEle.style.display = "none";
              };
            }
          };
          listEle.appendChild(liEle);
        });
      }
    </script>
  </body>
</html>
